<template>
  <div class="layout-container">
    <!-- 左侧导航栏 -->
    <el-aside width="200px">
      <el-menu
        :default-openeds="['1']"
        :unique-opened="true"
        router
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>汽车修理后台管理</span>
          </template>
          <el-menu-item index="/shoppingordermanage">商城订单管理</el-menu-item>
          <el-menu-item index="/maintorder">维修订单管理</el-menu-item>
          <el-menu-item index="/addressmanage">收货地址管理</el-menu-item>
          <el-menu-item index="/adminmanage">登陆人管理</el-menu-item>
          <el-menu-item index="/goodsmanage">商品管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!-- 右侧内容区域 -->
    <el-main>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findMaintorder()">查询</el-button>
          <el-button type="primary" @click="form={}">清空</el-button>
          <el-button type="primary" @click="toadd()">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border>
        <el-table-column
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="oid"
          label="订单编号">
        </el-table-column>
        <el-table-column
          prop="name"
          label="下单人">
        </el-table-column>
        <el-table-column
          prop="wxlx"
          label="维修类型">
        </el-table-column>
        <el-table-column
          prop="gzlx"
          label="故障类型">
        </el-table-column>
        <el-table-column
          prop="gzms"
          label="故障描述">
        </el-table-column>
        <el-table-column
          prop="cjtime"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="smf"
          label="上门费">
        </el-table-column>
        <el-table-column
          prop="wlf"
          label="物料费">
        </el-table-column>
        <el-table-column
          prop="gsf"
          label="工时费">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="toupdate(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="todelete(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="pojo.id==null?'添加':'修改'" :visible.sync="dialogFormVisible">
        <el-form :model="pojo">
          <el-form-item label="下单人">
            <el-input v-model="pojo.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="维修类型">
            <el-input v-model="pojo.wxlx" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="故障类型">
            <el-input v-model="pojo.gzlx" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="故障描述">
            <el-input v-model="pojo.gzms" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上门费">
            <el-input v-model="pojo.smf" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="物料费">
            <el-input v-model="pojo.wlf" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="工时费">
            <el-input v-model="pojo.gsf" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOrUpdate();dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "LayoutPage",
  data() {
    return {
      tableData: [],
      form: {},
      dialogFormVisible: false,
      pojo: {},
    }
  },
  methods: {
    todelete(id){
      axios.get("/maintorder/deleteMaintorder?id="+id).then(res=>{
        this.$message(res.data.message);
        this.findMaintorder();
      })
    },
    toupdate(row){
      this.pojo=JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = true;
    },
    addOrUpdate(){
      axios.post("/maintorder/addMaintorder",this.pojo).then(res=>{
        this.$message(res.data.message);
        this.findMaintorder();
        this.dialogFormVisible = false;
      })
    },
    toadd(){
      this.pojo={};
      this.dialogFormVisible = true;
    },
    findMaintorder() {
      axios.post("/maintorder/findMaintorder",this.form).then(res => {
        this.tableData = res.data.data.list;
      })
    }
  },
  created() {
    this.findMaintorder();
  }
};
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100vh;
}

.el-aside {
  background-color: #545c64;
}

.el-main {
  flex: 1;
  padding: 20px;
}
</style>
